<script setup lang="tsx">
import { reactive, ref, watch } from 'vue';
import { getComponentInfoSubitem } from '@/service/api';
import PNLHistory from './PNL-history.vue';
import SetPcsList from './set-pcs-list.vue';

const lotId = defineModel<string>('lotId', { required: true });

const page = ref({
  pageNum: 1,
  pageSize: 200
});
const pagination = reactive({
  current: page.value.pageNum,
  pageSize: page.value.pageSize,
  showSizeChanger: true,
  pageSizeOptions: ['50', '100', '200', '300', '500'],
  showQuickJumper: true,
  showTotal: (total: number, range: number[]) => {
    return `共${total}条`;
  },
  total: 0,
  onChange: async (current: number, size: number) => {
    console.log('current :>> ', current);
    pagination.current = current;
    pagination.pageSize = size;
    page.value.pageNum = current;
    page.value.pageSize = size;
    getData();
  }
});

const tableData = ref([]);
const loading = ref(false);
const columns = ref<any[]>([
  {
    key: 'index',
    dataIndex: 'index',
    title: '序号',
    align: 'center',
    width: 70,
    checked: true,
    ellipsis: true
  },
  {
    key: 'componentId',
    dataIndex: 'componentId',
    title: 'PNL ID',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'isEqpPrint',
    dataIndex: 'isEqpPrint',
    title: '是否打印',
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return record.isEqpPrint == 'Y' ? '已打印' : '未打印';
    }
  },
  {
    key: 'dateTime',
    dataIndex: 'dateTime',
    title: '打印时间',
    align: 'center',
    checked: true,
    ellipsis: true
  }
]);

const currentRowId = ref<any>(null);
const customRow = record => {
  return {
    // style: {
    //   'background-color': record.componentId === currentRowId.value ? 'rgba(86, 205, 243, 0.3)' : ''
    // },
    class: record.componentId === currentRowId.value ? 'jl-table-row-selected' : '',
    onClick: () => {
      currentRowId.value = record.componentId;
    }
  };
};

function getData() {
  const params = {
    ...page.value,
    lotId: lotId.value
  };
  loading.value = true;
  getComponentInfoSubitem(params)
    .then(({ data, error }) => {
      // if (!error) {
      console.log('data :>> ', data);
      data.list.forEach((item: any, index: number) => {
        item.index = index + 1;
      });
      pagination.total = data.total;
      tableData.value = data.list;
      // }
    })
    .finally(() => (loading.value = false));
}

watch(
  () => lotId.value,
  val => {
    if (val) {
      page.value.pageNum = 1;
      pagination.current = 1;
      getData();
    }
  }
);
// tabs
const activeKey = ref('1');
</script>

<template>
  <div class="png-box h-full flex gap-15px">
    <div class="h-full w-40%">
      <ACard
        :bordered="false"
        :body-style="{ flex: 1, overflow: 'hidden' }"
        class="table-card h-full flex-col-stretch sm:flex-1-hidden card-wrapper"
      >
        <template #extra>
          <TableColumnSetting v-model:columns="columns" />
        </template>
        <ATable
          ref="tableWrapperRef"
          :columns="columns"
          :data-source="tableData"
          bordered
          size="small"
          :loading="loading"
          row-key="id"
          :pagination="pagination"
          :custom-row="customRow"
          :scroll="{ x: 'auto', y: 'atuo' }"
          class="h-full"
        />
      </ACard>
    </div>
    <div class="h-full w-60%">
      <ATabs v-model:activeKey="activeKey" class="tags h-full w-full" type="card">
        <ATabPane key="1" tab="PNL 历史" force-render>
          <PNLHistory v-model:component-id="currentRowId" />
        </ATabPane>
        <ATabPane key="2" tab="SET/PCS清单" force-render>
          <SetPcsList v-model:component-id="currentRowId" />
        </ATabPane>
      </ATabs>
    </div>
  </div>
</template>

<style></style>
